<style type="text/css">
    /* popup_box DIV-Styles*/
    #popup_box {
        display:none; /* Hide the DIV */
        position:fixed;
        _position:absolute; /* hack for internet explorer 6 */
        height:425px;
        width:500px;
        background:#FFFFFF;
        z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
        /* additional features, can be omitted */
        border:2px solid #05AAEA;
        padding:10px;
        font-size:15px;
        -moz-box-shadow: 0 0 5px #05AAEA;
        -webkit-box-shadow: 0 0 5px #05AAEA;
        box-shadow: 0 0 5px #05AAEA;

    }
    /* This is for the positioning of the Close Link */
    #popupBoxClose {
        font-size:20px;
        line-height:15px;
        right:5px;
        top:5px;
        position:absolute;
        color:#6fa5e2;
        font-weight:500;
    }
    #day_select{float:left;width:50px;margin-right:10px;}
    #month_select{float:left;width:130px;margin-right:10px;}
    #year_select{float:left;width:100px;margin-right:10px;}
    div.message{
        background: transparent url(msg_arrow.gif) no-repeat scroll left center;
        padding-left: 7px;
    }
    .error{border: red 1px dotted}

    div.error{
        background-color:#F3E6E6;
        border-color: #924949;
        border-style: solid solid solid none;
        border-width: 2px;
        padding: 5px;
    }

</style>

<script type="text/javascript"> 
    //center the div to browser using jquery
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
        this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
        return this;
    }

    //adjust div position according to window scroll bar movement
    //scroll popup with browser scrollbar jquery
    $(window).scroll(function () {
        $('#popup_box').animate({top:$(window).scrollTop()+30},100);
    });

    $(document).ready( function() {
        jQuery("#popup_box").center(); //keeping popup in center while scrolling
        //For form validation
        
            //alert($('form').serialize());
            $("#quickreg").validate({                
                //reference taken from - http://stackoverflow.com/questions/860055/jquery-override-default-validation-error-message-display-css-popup-tooltip-lik
                errorPlacement: function(error, element) {},//jquery form validate disable label messages
                /*   errorElement: "div",
                    wrapper: "div",  // a wrapper around the error message
                    errorPlacement: function(error, element) {
                        offset = element.offset();
                        error.insertBefore(element)
                        error.addClass('message');  // add a class to the wrapper
                        error.css('position', 'absolute');
                        error.css('left', element.outerWidth() );
                        error.css('top', element.outerHeight());

                    }*/
                debug:true,
                success: "valid",
                invalidHandler: function(form, validator) {                    
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        var message = errors == 1
                            ? 'You missed 1 field. It has been highlighted'
                        : 'You missed ' + errors + ' fields. They have been highlighted';
                        $("div.error span").html(message);
                        $("div.error").show();
                    } else {
                        $("div.error").hide();
                    }
                },

                submitHandler: function(form) {
                    $.ajax({
                        url:"process.php",
                            data: $("#quickreg").serialize(),
                        type:"post",
                        success: function(){
                            $('#reg_left_middle_right').html("<div id='message2'></div>");
                            $('#message').show();
                            $('#message2').html("<h2>Registration Form Submitted!</h2>")
                            .append("<p>We will be in touch soon.</p>")
                            .hide()
                            .fadeIn(1500, function() {
                                //$('#message').append("<a href='#' class='close' >close</a>");
                            });
                        }
                    });
                }
            });
            //put validation here and return false
            //return false;
        

        // When site loaded, load the Popupbox First
        loadPopupBox();

        $('.close').click( function() {// TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style
                "opacity": "1"
            });
        });

        function loadPopupBox() {	// To Load the Popupbox
            $('#message').hide();
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"
            });
        }
        /**********************************************************/

    }); //document ready function close here

</script>


<div id="popup_box">    <!-- OUR PopupBox DIV-->   
    <div id="page_heading" style="width:100%; margin-bottom:10px;">Register to eParinay.com. Its totally FREE !!!</div>
    <div id='message'>
        <a href='#' class='close' >close</a>
        <h2>Registration Form Submitted!</h2>
        <p>We will be in touch soon.</p>
    </div>
    <div id="reg_left_middle_right" style="width:100%">
            <?=$mesg?>
        <div id="padding_use_only" style="">

            <form action="#" method="post" name="quickreg" id="quickreg" target="_self" id="quickreg">
                <div id="registration_row2" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column">
                        <div id="text_before_colon">First &amp; Last Name </div><div id="colon">:</div></div>
                    <div id="fields_column"><input type="text" class="required" name="firstname" style="width:168px; letter-spacing:1px; float:left; margin-right:5px;" />
                        <input type="text" name="surname" class="required" style="width:168px; letter-spacing:1px; float:left;" />
                    </div>
                </div>               
                <div id="registration_row1" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Gender</div><div id="colon">:</div></div>
                    <div id="fields_column">
                        <select name="gender" style="width:105px;">
                            <option value="Female" selected="selected">Female</option>
                            <option value="Male">Male</option>
                        </select>
                        &nbsp;&nbsp;&nbsp;&nbsp;Age :&nbsp;
                        <?php echo age_select(); ?>
                    </div>
                </div>

                <div id="registration_row2" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Date of Birth</div><div id="colon">:</div></div>
                    <div id="fields_column">
                        <div id="dob_input" style="width:500px">
                            <?php
                                //or limit by age requirement
                                echo date_dropdown(18);
                            ?>
                        </div>

                    </div>
                </div>
                <div id="registration_row1" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">mobile</div><div id="colon">:</div></div>
                    <div id="fields_column"><input type="text" name="tel" style="width:120px; letter-spacing:1px;" />
                        
                    </div>
                </div>
                <div id="registration_row2" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Address</div><div id="colon">:</div></div>
                    <div id="fields_column"><textarea name="address" class="required" style="width:346px; height:40px; padding:3px; letter-spacing:1px;"></textarea>
                    </div>
                </div>
                <div id="registration_row1" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">

                    <div id="text_column"><div id="text_before_colon">City</div><div id="colon">:</div></div>
                    <div id="fields_column">
                        <div id="reg_city"><select name="city" id="city" style="width:120px;" />
                            <?
                                $str="select * from nativeplace order by nativeplace_id DESC";
                                $rc = mysql_query($str) or die ("Sorry! could not execute query $str ".mysql_error());
                                while($row=mysql_fetch_array($rc)) {
                                ?>
                            <option value="<?=$row['nativeplace_id']?>" <?if($_REQUEST['community']==$row['community_id']) {
                                        echo "selected";
                                            }?>><?=$row['nativeplace']?></option>
                                        <? } ?>
                            </select></div>
                        <div id="other_city">Other City<span class="red-txt">*</span>&nbsp;:&nbsp;<input name="othernative" type="text" id="othernative" style="width:115px; letter-spacing:1px;" value="<?=$_REQUEST['othernative']?>" /></div>
                    </div>
                </div>
                <div id="registration_row2" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Login Email</div><div id="colon">:</div></div>
                    <div id="fields_column"><input name="email" class="required" type="text" value="<?=$_REQUEST['email']?>" style="width:344px; color:#0033FF; letter-spacing:1px;" />
                    </div>
                </div>
                <div id="registration_row1" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Login Password</div><div id="colon">:</div></div>
                    <div id="fields_column"><input name="password1" class="required" type="password" id="password1" style="width:120px;" />
                        &nbsp; Retype :
                        <input name="password2" type="password" id="password2" class="required" style="width:120px;"  />
                    </div>
                </div>

                <div id="registration_row2" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Marital Status</div><div id="colon">:</div></div>
                    <div id="fields_column">
                        <input name="marital_status" type="radio" id="marital_status" style="border:none; background-color:#EDF9FE;" onclick="disbNoChildren(this.value)" value="unmarried" checked="checked", />Unmarried
                               <input type="radio" name="marital_status" value="widow" style="border:none; background-color:#EDF9FE;" id="marital_status1" onclick="disbNoChildren(this.value)" />Widow/Widower
                        <input type="radio" name="marital_status" value="divorcee" style="border:none; background-color:#EDF9FE;" id="marital_status2" onclick="disbNoChildren(this.value)" />Divorcee<br />
                    </div>
                </div>
                <div id="registration_row1" onmouseover="myBG(this,'#F3FFD7')" onmouseout="myBG(this,'')">
                    <div id="text_column"><div id="text_before_colon">Preferred Partner</div><div id="colon">:</div></div>
                    <div id="fields_column"><textarea name="expectation" class="required" id="expectation" style="width:352px; height:40px; padding:3px; letter-spacing:1px;"></textarea>
                    </div>
                </div>
                <div id="registration_row2">
                    <div id="text_column">&nbsp;</div><input name="community" type="hidden" id="community" value="1" />
                    <div id="fields_column">

                        <label>
                            <input name="Submit" class="button" type="image" id="Submit" style="width:75px; height:25px; border:none; background-color:#EDF9FE; padding-left:0px;" src="images/images/search_go.jpg" width="55" height="21" border="0" alt="Register to eParinay.com" title="Register to eParinay.com" />
                        </label>
                    </div>
                </div>
                <div id="lal" style="height:0px;padding:0px;margin:0px; clear:both;">&nbsp;</div>
            </form>

        </div>
    </div>


</div>
<?php
    function date_dropdown($year_limit = 0) {
        $html_output = '    <div id="date_select" >';
        /*days*/
        $html_output .= '           <select name="date_day" id="day_select">';
        for ($day = 1; $day <= 31; $day++) {
            $html_output .= '               <option>' . $day . '</option>';
        }
        $html_output .= '           </select>';

        /*months*/
        $html_output .= '           <select name="date_month" id="month_select" >';
        $months = array("", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
        for ($month = 1; $month <= 12; $month++) {
            $html_output .= '               <option value="' . $month . '">' . $months[$month] . '</option>';
        }
        $html_output .= '           </select>';

        /*years*/
        $html_output .= '           <select name="date_year" id="year_select">';
        for ($year = 1900; $year <= (date("Y") - $year_limit); $year++) {
            $html_output .= '               <option>' . $year . '</option>';
        }
        $html_output .= '           </select>';

        $html_output .= '   </div>';
        return $html_output;
    }

    function age_select() {
        $html_output .= '           <select name="age" id="age">';
        for ($day = 18; $day <= 100; $day++) {
            $html_output .= '               <option>' . $day . '</option>';
        }
        $html_output .= '           </select>';
        return $html_output;
    }
?>